<template>
  <div >
    <form-head @onSubmit="onSubmit" :is_change="is_change"/>
    <el-form ref="form" :rules="rules" :model="form" label-width="115px" class="layout-all form-width">
      <el-form-item prop="account" label="用户名:">
        <el-input v-model="form.user.account" placeholder="请输入用户名" />
      </el-form-item>
      <el-form-item prop="city_ids" label="更改代理区域:">
          <el-cascader v-model="city_ids" v-if="(city_ids.length>0||id==0)&&options.length>0" :props="props" ></el-cascader>
      </el-form-item>
      <el-form-item prop="remark" label="备注:">
        <el-input v-model="form.remark" placeholder="请输入备注" />
      </el-form-item>
      <el-form-item prop="status" label="是否启用:">
        <el-switch v-model="form.status" />
      </el-form-item>
      <el-form-item>
        <el-button type="success" size="mini" v-if="form.apply_status==0" @click="onSubmitT('form',1)"
          >通过</el-button
        >
        <el-button type="danger" size="mini" v-if="form.apply_status==0" @click="onSubmitT('form',2)"
          >拒绝</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {get} from '@/utils/request'
export default {
  name:'agent_form',
  data() {
    return {
      id: 0,
      is_change: undefined,
      region_ids:[],
      form: {status:true,user:{account:''}},
      options: {},
      city_ids: {},
      rules: {

      },
      props: {
          lazy: true,
          value:'id',
          label:'name',
          checkStrictly: true,
          lazyLoad (node, resolve) {
            const { level ,value} = node;
            let data={parent_id:value}
            if(level>2){
              resolve([])
              return
            }
            get("/admin/RegionAgent/get_region", data, "POST").then((e) => {
              let nodes=e.list
              if(level==2){
                for(let i in nodes){
                  nodes[i].leaf=true
                }
              }
              for(let i in nodes){
                let bn=false
                for(var j in e.region_ids){
                  if(e.region_ids[j]==nodes[i].id){
                      bn= true
                      break
                  }
                }
                nodes[i].disabled=bn
              }
              resolve(nodes);
            })
          }
        },
    }
  },
  mounted() {
    this.id = (this.$route.params && this.$route.params.id)||0
    this.$setTagsViewTitle(this.id)
    this.init_into()
  },
  methods: {
    in_array(search,array){
        for(var i in array){
            if(array[i]==search){
                return true;
            }
        }
        return false;
    },
    onSubmitT(formName,status) {
        this.form.apply_status=status
        this.onSubmit(formName)
    },
    onSubmit(formName) {
      if(this.city_ids.length==0){
        this.$msg_ok('error','请选择区域')
        return
      }
      if(this.form.user.account==''){
        this.$msg_ok('error','请输入用户名')
        return
      }
      const form = this.form
      this.$refs[formName].validate(valid => {
        if (valid) {
          form.id = this.id
          form.status =form.status ? 1 : 0
          form.region_id=this.city_ids[this.city_ids.length-1]
          this.get('/admin/RegionAgent/save', form, 'POST').then(e => {
            this.$msg_ok('success', '操作成功')
            this.$back()
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
      console.log('submit!')
    },
    bk() {
      this.$router.back()
    },
    init_into() {
      this.get('/admin/RegionAgent/info?id=' + this.id, this.form, 'POST').then(e => {
        if(this.id>0){
          this.form = e.info
          this.city_ids= e.city_ids
          this.form.status =this.form.status==1
        }
        
        this.options=e.region_level
        this.region_ids=e.region_ids
        setTimeout(()=>{this.is_change=false},100)
      })
    }
  },
  watch: {
    form:{
      handler (val, oldVal) {
	      if(this.is_change!=undefined)
        	this.is_change=true
      },
      deep:true
    },
    city_ids:{
      handler (val, oldVal) {
	      if(this.is_change!=undefined)
        	this.is_change=true
      },
      deep:true
    }
  }
}
</script>

<style>
.layout-all {
  margin: 10px;
}
</style>
